<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>ref的使用</title>
	<link rel="stylesheet" href="./libs/bootstrap.css">
</head>
<body>
	<div class="container"></div>
</body>
<script src="./libs/16.2.0/react.js"></script>
<script src="./libs/16.2.0/react-dom.js"></script>
<script src="./libs/16.2.0/babel.js"></script>
<script type="text/babel">
	class Forms extends React.Component{
		constructor(props){
			super(props);
			this.state={
				placeholder:props.placeholder
			};
		}
	
		componentWillMount(){
			//此时应该获取不到dom
			console.log(this.refs);
		}

		componentDidMount(){
			console.log(this.refs);
			this.refs.textInput.style.border="1px solid red";
			this.refs.textInput.focus();
		}

		render(){
			return <div>
				<input type="text" className="form-control" ref="textInput" placeholder={this.state.placeholder}/>
			</div>
		}
	}

	ReactDOM.render(
	<Forms placeholder='请输入用户名' />,
	document.querySelector('.container')
	);
</script>
</html>